<template>
  <div class="map">
    <div class="box-map" ref="map">

    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
// 引入地图json数据
import chinaJSON from './china.json'

const map = ref() 
//先注册中国地图
echarts.registerMap('china', chinaJSON as any)
onMounted(()=>{
  const myCharts = echarts.init(map.value)
  myCharts.setOption({
    // 地图组件
    geo: [{
      map: 'china',
      roam: true, // 鼠标缩放和平移
      // 位置测试
      layoutCenter: ['45%', '70%'],
      layoutSize: 500,
      //当前视角缩放比例
      zoom: 1.5,
      // 地图文字设置
      label: {
        show: true,
        rotate: 20,
        color: '#fff',
        fontSize: 13
      },
      // 多边形块设置
      itemStyle: {
        opcaity: .8,
        areaColor: 'rgb(36,50,97)',
        borderColor: '#3fdaff',
        borderWidth: 1,
      },
      //高亮情况下的样式
      emphasis: {
        label: {
          fontSize: 25,
          color: '#fff',
        },
        itemStyle: {
          areaColor: '#2B91B7',
        },
      },
    }],
    grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0
      },
      series: [
      {
        type: 'lines',//航线系列
        // polyline: true,
        data: [
          {
            coords: [
                [116.405285,39.904989],  // 起点
                [87.617733,43.792818],   // 终点
            ],
            // 统一的样式设置
            lineStyle: {
              color: 'white',
              width: 3
            },
          },
          {
            coords: [
                [114.173355,22.320048],
                [106.504962,29.533155]
            ],
            // 统一的样式设置
            lineStyle: {
              color: 'white',
              width: 3
            },
          },
          {
            coords: [
                [91.132212,29.660361],
                [117.000923,36.675807]
            ],
            // 统一的样式设置
            lineStyle: {
              color: 'white',
              width: 3
            },
          },
        ],
        // 开启线条特效
        effect: {
          show: true,
          symbol: 'arrow',
          symbolSize: 20
        }
      }
    ]
  })
})




</script>

<style lang="scss" scoped>
  .map {
    width: 100%;
    height: 100%;


    .box-map {
      width: 100%;
      height: 650px;
      margin-top: 50px;
    }
  }
</style>
